import React, { FC } from 'react'
import {
    useLocation,
    useNavigate,
} from 'react-router-dom'

import styles from './index.module.less'
import { Tabbar } from 'react-vant'
import { FriendsO, HomeO, Search, FireO } from '@react-vant/icons';

const Footer: FC = () => {
    const navigate = useNavigate()
    const location = useLocation()
    const { pathname } = location

    const setRouteActive = (value: string | number) => {
        navigate(String(value))
    }

    const tabs = [
        {
            name: '/',
            title: '首页',
            icon: <HomeO />,
        },
        {
            name: '/vipNoteList',
            title: 'CP池',
            icon: <FireO />,
        },
        // {
        //     name: '/message',
        //     title: '我的消息',
        //     icon: <MessageOutline />,
        // },
        {
            name: '/my',
            title: '我的',
            icon: <FriendsO />,
        },
    ]

    return (
            <Tabbar zIndex={1000} value={pathname} placeholder fixed safeAreaInsetBottom={true} onChange={name => setRouteActive(name)}>
                {tabs.map(item => (
                    <Tabbar.Item key={item.name} name={item.name} icon={item.icon}>
                        {item.title}
                    </Tabbar.Item>
                ))}
            </Tabbar>
    )
}

export default Footer;